<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机床健康</title>
    <script type="text/javascript" src="/js/staticResources/js/echarts.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/echarts.min.js"></script>
    <script type="text/javascript" src="/js/highcharts.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/dark.js"></script>
    <script type="text/javascript" src="/js/staticResources/js/mqttws31.min.js"></script>
    <style>
        #health{
            left: 2%;
            top: 5%;
            height:90%;
            width:15%;
            position:absolute;
        }
        #machine1{
            height:23.5%;
            width: 100%;
            left:0%;
            top: 0%;
            position: absolute;
            background-color:greenyellow;

        }
        #machine2{
            height:23.5%;
            width: 100%;
            left:0%;
            top:25.5%;
            position: absolute;
            background-color:greenyellow;
        }
        #machine3{
            height:23.5%;
            width: 100%;
            left:0%;
            top:51%;
            position: absolute;
            background-color:greenyellow;
        }
        #machine4{
            height:23.5%;
            width: 100%;
            left: 0%;
            top:76.5%;
            position: absolute;
            background-color:greenyellow;
        }
        .bgimage{
            background-image: url("/images/new_machine_4.jpg");
            width:70%;
            top:14%;
            bottom: 14%;
            left: 15%;
            right: 15%;
            position: absolute;
            background-size: contain;
        }
        #mark{
            height:60%;
            width: 10%;
            left: 18%;
            top: 20%;
            position: absolute;
        }
        #color1{
            height:32%;
            width: 100%;
            top: 0%;
            left: 0%;
            position: absolute;
        }
        #color2{
            height:32%;
            width: 100%;
            top: 34%;
            left: 0%;
            position: absolute;

        }
        #color3{
            height: 32%;
            width: 100%;
            top: 68%;
            left: 0%;
            position: absolute;
        }
        #bg1{
            background-image: url("/images/green.png");
            left: 20%;
            top: 20%;
            height:40%;
            width: 40%;
            position: absolute;
        }
        #bg2{
            background-image: url("/images/yello.png");
            left: 20%;
            top: 20%;
            height:40%;
            width: 40%;
            position: absolute;
        }
        #bg3{
            background-image: url("/images/red.png");
            left: 20%;
            top: 20%;
            height:40%;
            width: 40%;
            position: absolute;
        }
        #chart{
            left: 28%;
            top: 5%;
            height:90%;
            width: 70%;
            position:absolute;
        }
        #machinechart1{
            left:0%;
            top:0%;
            width: 100%;
            height:23.5%;
            position: absolute;
        }
        #machinechart2{
            left:0%;
            top:25.5%;
            width: 100%;
            height:23.5%;
            position: absolute;
        }
        #machinechart3{
            left:0%;
            top:51%;
            width: 100%;
            height: 23.5%;
            position: absolute;
        }
        #machinechart4 {
            left: 0%;
            top: 76.5%;
            width: 100%;
            height: 23.5%;
            position: absolute;
        }
        #healthIndex1x {
            left: 0%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex1y {
            left: 34%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex1z {
            left: 68%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex2x {
            left: 0%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex2y {
            left: 34%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex2z {
            left: 68%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex3x {
            left: 0%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex3y {
            left: 34%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex3z {
            left: 68%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex4x {
            left: 0%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex4y {
            left: 34%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
        #healthIndex4z {
            left: 68%;
            top: 0%;
            width: 32%;
            height: 100%;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="health">
        <div id="machine1">
            <div style="top: -8%;left: 43%;position:absolute;">
                <h3 style="left:0%;top: 0% ">A1</h3>
            </div>
            <div class="bgimage"></div>
        </div>
        <div id="machine2">
            <div style="top: -8%;left: 43%;position:absolute;">
                <h3 style="left:0%;top: 0% ">A2</h3></div>
            <div class="bgimage"></div>
        </div>
        <div id="machine3">
            <div style="top: -8%;left: 43%;position:absolute;">
                <h3 style="left:0%;top: 0% ">A3</h3></div>
            <div class="bgimage"></div>
        </div>
        <div id="machine4">
            <div style="top: -8%;left: 43%;position:absolute;">
                <h3 style="left:0%;top: 0% ">A4</h3></div>
            <div class="bgimage"></div>
        </div>
    </div>
    <div id="mark">
        <div id="color1">
            <div id="bg1"></div>
            <h3 style="left: 20%; top: 50%;height:40%;position: absolute">&nbsp;&nbsp;健康</h3>
        </div>
        <div id="color2">
            <div id="bg2"></div>
            <h3 style="left: 20%; top: 50%;height:40%;position: absolute">&nbsp;&nbsp;良好</h3>
        </div>
        <div id="color3">
            <div id="bg3"></div>
            <h3 style="left: 20%; top: 50%;height:40%;position: absolute">&nbsp;&nbsp;报警</h3>
        </div>
    </div>
    <div id="chart">
        <h3 style="left: 15%;top: -7%;position:absolute">x方向&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;y方向&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;z方向</h3>
        <div id="machinechart1">
            <div id="healthIndex1x"></div>
            <div id="healthIndex1y"></div>
            <div id="healthIndex1z"></div>
        </div>
        <div id="machinechart2">
            <div id="healthIndex2x"></div>
            <div id="healthIndex2y"></div>
            <div id="healthIndex2z"></div>
        </div>
        <div id="machinechart3">
            <div id="healthIndex3x"></div>
            <div id="healthIndex3y"></div>
            <div id="healthIndex3z"></div>
        </div>
        <div id="machinechart4">
            <div id="healthIndex4x"></div>
            <div id="healthIndex4y"></div>
            <div id="healthIndex4z"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //A1机床
    option1 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
          top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option2 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option3 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };

    //A2机床
    option4 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option5 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option6 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    //A3机床
    option7 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option8 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option9 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    //A4机床
    option10 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option11 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };
    option12 = {
        title:{
            x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        grid: {
            top:'18%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            scale:true,
            minInterval:0.1
        },
        series: [{
            type: 'line',
            smooth: true
        }]
    };

    //A1机床
    var myChart1= echarts.init(document.getElementById('healthIndex1x'));
    var myChart2= echarts.init(document.getElementById('healthIndex1y'));
    var myChart3= echarts.init(document.getElementById('healthIndex1z'));

    //A2机床
    var myChart4= echarts.init(document.getElementById('healthIndex2x'));
    var myChart5= echarts.init(document.getElementById('healthIndex2y'));
    var myChart6= echarts.init(document.getElementById('healthIndex2z'));

    //A3机床
    var myChart7= echarts.init(document.getElementById('healthIndex3x'));
    var myChart8= echarts.init(document.getElementById('healthIndex3y'));
    var myChart9= echarts.init(document.getElementById('healthIndex3z'));

    //A4机床
    var myChart10= echarts.init(document.getElementById('healthIndex4x'));
    var myChart11= echarts.init(document.getElementById('healthIndex4y'));
    var myChart12= echarts.init(document.getElementById('healthIndex4z'));


    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);

    myChart4.setOption(option4);
    myChart5.setOption(option5);
    myChart6.setOption(option6);

    myChart7.setOption(option7);
    myChart8.setOption(option8);
    myChart9.setOption(option9);

    myChart10.setOption(option10);
    myChart11.setOption(option11);
    myChart12.setOption(option12);

    var data1=[];
    var data2=[];
    var data3=[];
    var data4=[];
    var data5=[];
    var data6=[];
    var data7=[];
    var data8=[];
    var data9=[];
    var data10=[];
    var data11=[];
    var data12=[];

    var clientid="temclient"+Math.random();
    var clientid1="temclient"+Math.random();
    var clientid2="temclient"+Math.random();
    var clientid3="temclient"+Math.random();

    client = new Paho.MQTT.Client("192.168.11.80",8083,clientid); //建立客户端实例
    client1 = new Paho.MQTT.Client("192.168.11.78",8083,clientid1); //建立客户端实例
    client2 = new Paho.MQTT.Client("192.168.11.79",8083,clientid2); //建立客户端实例
    client3 = new Paho.MQTT.Client("192.168.11.90",8083,clientid3); //建立客户端实例

    client.connect({
        onSuccess: onConnect,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client.onConnectionLost = onConnectionLost; //注册连接断开处理事件
    client.onMessageArrived = onMessageArrived; //注册消息接收处理事件

    client1.connect({
        onSuccess: onConnect1,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client1.onConnectionLost = onConnectionLost1; //注册连接断开处理事件
    client1.onMessageArrived = onMessageArrived1; //注册消息接收处理事件

    client2.connect({
        onSuccess: onConnect2,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client2.onConnectionLost = onConnectionLost2; //注册连接断开处理事件
    client2.onMessageArrived = onMessageArrived2; //注册消息接收处理事件

    client3.connect({
        onSuccess: onConnect3,
        userName: "admin",
        password: "public"
    }); //连接服务器并注册连接成功处理事件
    client3.onConnectionLost = onConnectionLost3; //注册连接断开处理事件
    client3.onMessageArrived = onMessageArrived3; //注册消息接收处理事件

    function onConnect() {
        console.log("已连接");
        client.subscribe("temperaturesignal"); //订阅工控机1主题
    }
    function onConnectionLost(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client.connect({
            onSuccess: onConnect,
            userName: "admin",
            password: "public"
        });

    }
    function onMessageArrived(message) {
        topic = message.destinationName;
        payload = message.payloadString;
        if (payload !== "close") {
            //解析工况机发送的振动信号数据
            var str = payload.substring(1, payload.length - 1);
            var strarray = str.split(",");
            var mess1 = strarray[0];
            var mess2 = strarray[1];
            var mess3 = strarray[2];
            var mess11 = mess1.substring(1, mess1.length - 1);
            var mess22 = mess2.substring(1, mess2.length - 1);
            var mess33 = mess3.substring(1, mess3.length - 1);
            var messarray1 = mess11.split(",");
            var messarray2= mess22.split(",");
            var messarray3 = mess33.split(",");
            if (topic == 'temperaturesignal') {
                data1.push(messarray1[0]);
                if (data1.length>60){
                    data1.shift();
                }
                data2.push(messarray2[0]);
                if (data2.length>60){
                    data2.shift();
                }
                data3.push(messarray3[0]);
                if (data3.length>60) {
                    data3.shift();
                }
                myChart1.setOption({
                    series: [{
                        data: data1
                    }]
                });
                myChart2.setOption({
                    series: [{
                        data: data2
                    }]
                });
                myChart3.setOption({
                    series: [{
                        data: data3
                    }]
                });
            }

        }
    }

    function onConnect1() {
        console.log("已连接");
        client1.subscribe("temperaturesignal"); //订阅工控机2主题
    }
    function onConnectionLost1(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client1.connect({
            onSuccess: onConnect1,
            userName: "admin",
            password: "public"
        });

    }
    function onMessageArrived1(message) {
        topic = message.destinationName;
        payload = message.payloadString;
        if (payload !== "close") {
            //解析工况机发送的振动信号数据
            var str = payload.substring(1, payload.length - 1);
            var strarray = str.split(",");
            var mess1 = strarray[0];
            var mess2 = strarray[1];
            var mess3 = strarray[2];
            var mess11 = mess1.substring(1, mess1.length - 1);
            var mess22 = mess2.substring(1, mess2.length - 1);
            var mess33 = mess3.substring(1, mess3.length - 1);
            var messarray1 = mess11.split(",");
            var messarray2= mess22.split(",");
            var messarray3 = mess33.split(",");
            if (topic == 'temperaturesignal') {
                data4.push(messarray1[0]);
                if (data4.length>60){
                    data4.shift();
                }
                data5.push(messarray2[0]);
                if (data5.length>60){
                    data5.shift();
                }
                data6.push(messarray3[0]);
                if (data6.length>60){
                    data6.shift();
                }
                myChart4.setOption({
                    series: [{
                        data: data4
                    }]
                });
                myChart5.setOption({
                    series: [{
                        data: data5
                    }]
                });
                myChart6.setOption({
                    series: [{
                        data: data6
                    }]
                });
            }
        }
    }

    function onConnect2() {
        console.log("已连接");
        client2.subscribe("temperaturesignal"); //订阅工控机3主题
    }
    function onConnectionLost2(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client2.connect({
            onSuccess: onConnect2,
            userName: "admin",
            password: "public"
        });

    }
    function onMessageArrived2(message) {
        topic = message.destinationName;
        payload = message.payloadString;
        if (payload !== "close") {
            //解析工况机发送的振动信号数据
            var str = payload.substring(1, payload.length - 1);
            var strarray = str.split(",");
            var mess1 = strarray[0];
            var mess2 = strarray[1];
            var mess3 = strarray[2];
            var mess11 = mess1.substring(1, mess1.length - 1);
            var mess22 = mess2.substring(1, mess2.length - 1);
            var mess33 = mess3.substring(1, mess3.length - 1);
            var messarray1 = mess11.split(",");
            var messarray2= mess22.split(",");
            var messarray3 = mess33.split(",");
            if (topic == 'temperaturesignal') {
                data7.push(messarray1[0]);
                if (data7.length>60){
                    data7.shift();
                }
                data8.push(messarray2[0]);
                if (data8.length>60){
                    data8.shift();
                }
                data9.push(messarray3[0]);
                if (data9.length>60){
                    data9.shift();
                }
                myChart7.setOption({
                    series: [{
                        data: data7
                    }]
                });
                myChart8.setOption({
                    series: [{
                        data: data8
                    }]
                });
                myChart9.setOption({
                    series: [{
                        data: data9
                    }]
                });
            }

        }
    }

    function onConnect3() {
        console.log("已连接");
        client3.subscribe("temperaturesignal"); //订阅工控机4主题
    }
    function onConnectionLost3(responseObject) {
        if(responseObject.errorCode !== 0) {
            console.log("连接已断开");
        }
        client3.connect({
            onSuccess: onConnect3,
            userName: "admin",
            password: "public"
        });

    }
    function onMessageArrived3(message) {
        topic = message.destinationName;
        payload = message.payloadString;
        if (payload !== "close") {
            //解析工况机发送的振动信号数据
            var str = payload.substring(1, payload.length - 1);
            var strarray = str.split(",");
            var mess1 = strarray[0];
            var mess2 = strarray[1];
            var mess3 = strarray[2];
            var mess11 = mess1.substring(1, mess1.length - 1);
            var mess22 = mess2.substring(1, mess2.length - 1);
            var mess33 = mess3.substring(1, mess3.length - 1);
            var messarray1 = mess11.split(",");
            var messarray2= mess22.split(",");
            var messarray3 = mess33.split(",");
            if (topic == 'temperaturesignal') {
                data10.push(messarray1[0]);
                if (data10.length>60){
                    data10.shift();
                }
                data11.push(messarray2[0]);
                if (data11.length>60){
                    data11.shift();
                }
                data12.push(messarray3[0]);
                if (data12.length>60){
                    data12.shift();
                }
                myChart10.setOption({
                    series: [{
                        data: data10
                    }]
                });
                myChart11.setOption({
                    series: [{
                        data: data11
                    }]
                });
                myChart12.setOption({
                    series: [{
                        data: data12
                    }]
                });
            }
        }
    }

</script>
</body>
</html>